<template>
	<view class="select-village" >
		<uni-popup ref="popSeleRef"  :safe-area="true" type="bottom"  :is-mask-click="false">

			<view class="title c-flex jc-between">
				<view>选择区域</view>
				<view @tap="close()">×</view>
			</view>
			<view class="search-con c-flex ">
				<view class="c-flex jc-between gap-5">
					<view class="input-con c-flex jc-start c-item-center ">
						<image :src="remoteImgUrl+'search-icon.png'"></image>
						<input class="uni-input" v-model="lpgUserName" name="text" style="width:72%"
							confirm-type="search" placeholder="请输入村/小区搜索" @input="onInputChange" />

					</view>
				</view>
			</view>
			<view class="tabs-con c-flex c-flex-row ">
				<view class="tab-item" v-for="(item,index) in tabsBarArr" :key="index" @click="onTabbarClick(item)">
					<view class="sele-bg" v-if="item.selected"></view>
					{{item.label}}
				</view>
			</view>
			<view class="pop-content c-flex">
				<scroll-view class="town" scroll-y="true" :scroll-with-animation='true' :scroll-into-view="townId" scroll-with-animation="true"   >
					<view  class="list c-flex c-item-center" v-for="(item,tIndex) in new_townList"
						:key="tIndex" :id="'t_'+tIndex"  @click="townHandler(item)">
						<view>{{item.name}}</view>
						<image  v-if="item.selected" :src="roomImgUrl+'selected.png'"></image>
					</view>
				</scroll-view>
				<scroll-view class="village" scroll-y="true" :scroll-with-animation='true' :scroll-into-view="villageId" scroll-with-animation="true"  >
					<view   :class="item.selected?'selectedName':''" class="list" v-for="(item,index) in villageList" :key="index" :id="'v_'+index" @tap="villageHandler(item)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="btn-view" @tap="confirm()">
				<view class="btn">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "select-village",
		data() {
			return {
				indicatorStyle: `height: 40px;`,
				roomImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				tabsBarArr: [{
					label: '街道/镇',
					value: 0
				}, {
					label: '村/小区',
					value: 1
				}],
				userBarItem: null,
				villageList: [],
				defaultTownItem: null,
				defaultVillageItem: null,
				new_townList:[],
				lpgUserName:'',
				townId:'',
				villageId:''
			};
		},
		props: {
			userType:{
				type: String
			},
			townIndex:{
				type: Number
			},
			villageIndex:{
				type: Number
			},
			townList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		mounted() {
			this.tabsBarArr.forEach(item => {
				item['selected'] = false;
			});
			this.userBarItem = this.tabsBarArr[0];
			this.userBarItem.selected = true;
		},
		methods: {
			open() {
				this.$refs.popSeleRef.open();
				this.townList.map(item=>{
					
					item['selected'] = false;
				});
				this.new_townList = this.townList;
				this.townIndex = this.townIndex === -1?0 : this.townIndex;
				
				this.$nextTick(()=>{
					this.townId = 't_'+this.townIndex;
					this.defaultTownItem = this.new_townList[this.townIndex];
					this.defaultTownItem.selected = true;
					this.onInputChange();
				})
				
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				console.log('close')
				this.townId=''
				this.villageId=''
				this.$refs.popSeleRef.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm() {
				this.townId=''
				this.villageId=''
				const obj={
					streetName:this.defaultTownItem.name,
					villageName:this.defaultVillageItem.name,
					villageId:this.defaultVillageItem.id
				}
				
				this.$emit('addDataPrompt',obj);
				this.$refs.popSeleRef.close()
			},
			onInputChange() {
				
				console.log('userType:',this.userType)
				
				
				
					this.getLiquefiedGasVillageList();
				
				
			},
			//tabbar切换事件监听
			onTabbarClick(item) {
				this.userBarItem.selected = false;
				item.selected = true;
				this.userBarItem = item;
			},
			townHandler(item) {
				this.defaultTownItem.selected = false;
				item.selected = true;
				this.defaultTownItem = item;

				
				this.getLiquefiedGasVillageList()
			},
			getLiquefiedGasVillageList(){
				const data={
					openLpg:true,
					name:this.lpgUserName|| '',
					town:this.defaultTownItem.name,
					page:1,limit:999
				}
				this.$API.liquefiedGasVillageList(this.userType,data).then(res=>{
					let data =res.page.list||[];
					data.forEach(item=>{
						item['selected'] = false;
					});
					this.villageList = data;
					
					let idx = this.villageList.findIndex((item) => item.id === this.villageIndex);
					idx = idx ===-1?0:idx;
					this.$nextTick(()=>{
						this.villageId = 'v_'+idx;
						console.log(this.villageId )
						this.defaultVillageItem = this.villageList[idx];
						this.defaultVillageItem.selected = true;
						
					})
					
				})
			},
			villageHandler(item) {
				this.defaultVillageItem.selected = false;
				item.selected = true;
				this.defaultVillageItem = item;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-village {
		padding: 14rpx 32rpx 32rpx 32rpx;
		.btn-view {
			padding: 50rpx 0;
			background: #fff;
			.btn {
				margin: 0 auto;width: 686rpx;height: 84rpx;background: linear-gradient(180deg, #F18858 0%, #E86547 100%);border-radius: 42rpx;border: 2rpx solid #E96949;font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 28rpx;color: #FFFFFF;line-height: 84rpx;text-align: center;
			}
		}

		.title {
			background-color: #fff;
			padding: 31rpx 39rpx 20rpx;
			border-radius: 35rpx 35rpx 0 0;

			view:nth-child(1) {
				font-family: PingFang-SC, PingFang-SC;font-weight: bold;font-size: 30rpx;color: #333333;
			}

			view:nth-child(2) {
				font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 40rpx;color: #999999;width: 48rpx;height: 48rpx;background: #F3F3F7;border-radius: 100%;text-align: center;line-height: 42rpx;
			}
		}

		.search-con {
			background: #fff;
			padding: 10rpx 18rpx 0rpx;

			.input-con {
				width: 686rpx;height: 80rpx;background: #F3F3F7;border-radius: 40rpx;position: relative;width: 695rpx;line-height: 80rpx;padding-left: 18rpx;font-size: 24rpx;
				image{
					width: 42rpx;max-height: 42rpx;    margin-right: 12rpx;
				}

			}

			/*修改提示文字的颜色*/
			input::-webkit-input-placeholder {
				color: #8B959F;
			}

			input:-moz-placeholder {
				color: #8B959F;
			}

			input::-moz-placeholder {
				color: #8B959F;
			}

			input:-ms-input-placeholder {
				color: #8B959F;
			}

		}

		.tabs-con {
			background: #fff;
			width: 100%;
			height: 90rpx;

			.tab-item {
				line-height: 90rpx;width: 290rpx;font-size: 28rpx;font-weight: 500;color: #000;position: relative;padding-bottom: 14rpx;padding-left: 47rpx;

				text {
					background: #FA4B4B;padding: 0 10rpx;border-radius: 50%;position: absolute;right: -20rpx;top: -14rpx;

				}

				.sele-bg {
					position: absolute;width: 90rpx;height: 24rpx;bottom: 5rpx;left: 26%;transform: translate(-50%, -50%);width: 54rpx;height: 6rpx;background: linear-gradient(270deg, #FFFFFF 0%, #F18858 100%);border-radius: 3rpx;
				}
			}

			.selected {
				font-size: 30rpx;
				font-weight: 800;
				color: #333333;
			}

			//border-bottom: 6rpx solid #0084FF;
		}

		.pop-content {
			width: 100%;
			//height: 800rpx;
			background-color: #FFFFFF;
			.town{
				height: 800rpx;
				width: 330rpx;
				
			}
			.village{
				height: 800rpx;
				width: 330rpx;
				overflow-y: scroll;
			}
			.list {
				width: 250rpx;
				padding: 20rpx 44rpx;
				
				view{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
				}
				image {
					width: 40rpx;
					height: 40rpx;
					
				}
			}

			.selectedName {
				color: red
			}
		}
	}
</style>